<ui:composition template="../WEB-INF/templates/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:tc="http://java.sun.com/jsf/composite/components">

	<ui:define name="content-title">
		<h:outputLabel>Create a New Product</h:outputLabel>
	</ui:define>
		
	<ui:define name="content">
		<p:panel header="Shop details">
			<h:panelGrid columns="2">
				<p:panel>
					<p:graphicImage value="/resources/images/logos/chicken.gif"  height="100px" width="150px" />
				</p:panel>
				<p:panel style="width:680px; height:110px;background-color: #c4c4c4; background-image:url('../resources/images/logos/barbers.png');">
						<h:panelGrid columns="2" style="margin-top:75px">
							<h:outputText value="Shop Rating:" style="margin-left:480px"/>  
	        				<p:rating value="4" readonly="true" style=""/> 
						</h:panelGrid>						
				</p:panel>
			</h:panelGrid>	
			<h:form style="margin-left:690px">  
			    <p:menuButton value="Mail">  
			        <p:menuitem value="Save"   icon="ui-icon-disk"/>  
			        <p:menuitem value="Update"   icon="ui-icon-arrowrefresh-1-w"/>  
			        <p:menuitem value="Delete" icon="ui-icon-close"  ajax="false"/>  
			        <p:separator />  
			        <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
			    </p:menuButton>  
			    <p:menuButton value="Shop Settings">  
			        <p:menuitem value="Save"   icon="ui-icon-disk"/>  
			        <p:menuitem value="Update"   icon="ui-icon-arrowrefresh-1-w"/>  
			        <p:menuitem value="Delete" icon="ui-icon-close"  ajax="false"/>  
			        <p:separator />  
			        <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
			    </p:menuButton> 
			</h:form>  					
		</p:panel>		
		<p:panel header="Create new Product">
			<h:form>
			
				
				
				<p:wizard  widgetVar="shopWidget"   style="font-size:15px">	
								
					<p:tab title="Product Information">
						<p:panel header="Product Information">
						
						<p:messages id="message" />
						<p:growl id="growl" sticky="true" showDetail="true"  />
						
						   <h:panelGrid columns="2">
						   											
						   			<p:outputLabel value="Category:"/>
									<p:selectOneMenu value="#{productBean.product.category}" var="cat" style="width:140px"
										converter="#{categoryConverter}">
										<f:selectItem itemLabel="" itemValue=""/>
										<f:selectItems value="#{shopBean.categoryList}"  itemValue="#{cat}"/>
										 
										<p:column>
											#{cat.type}
										</p:column>
										
										<!-- <p:column>
											<p:graphicImage name="images/currencies/#{cat.sign}.png" width="30"/>
										</p:column>
										 -->
									</p:selectOneMenu>
										
								<p:outputLabel value="Product Name:"/>
								<p:inputText  value="#{productBean.product.name}"/>
								
								<p:outputLabel value="Quantity:"/>
								<p:spinner value="#{productBean.product.quantity}"/>
								
								<p:outputLabel value="Price:"/>
								<p:inputText  value="#{productBean.product.price}"/>
								
								<p:outputLabel value="Manufacture Date:"/>
								<p:calendar  value="#{productBean.product.manufacturedDate}" showOn="button"/>
								
								<p:outputLabel value="Description:"/>
								<p:inputTextarea rows="5"  value="#{productBean.product.description}"/>
								
								
								<p:outputLabel value="Brand:"/>
								<p:inputText  value="#{productBean.product.brand}"/>
								
								<p:outputLabel value="Product Image:"/>
								<h:panelGrid columns="2">
									<p:fileUpload mode="advanced" fileUploadListener="#{productBean.uploadProductImage}" update="messages" style="font-size:15px"
																sizeLimit="300000" 
																  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
									<p:growl id="messages" showDetail="true" />
								</h:panelGrid>	
									
								
								<p:outputLabel value="Deal Type:"/>								
								<p:selectOneRadio value="#{productBean.product.deal}" var="deal" style="width:140px"
										    converter="#{dealConverter}" layout="pageDirection" 
										    onchange="toggleExpiryDate()" id="dealRadio">
										
										<f:selectItems value="#{productBean.dealList}"  itemValue="#{deal}"/>
										 
										<p:column>
											#{deal.dealType}
										</p:column>									
										
								</p:selectOneRadio>
								
								<p:outputLabel/>
								<div id="dateHolder">
									<p:outputLabel value="Expiry Date:"/>
									<p:calendar value="#{productBean.product.expiryDate}"  showOn="button"/>
								</div>
														
								
							</h:panelGrid>
							<p:commandButton value="Submit" update="growl,message" actionListener="#{productBean.createProduct}" 
										style="margin-top:5px; margin-left:765px"/>
						</p:panel>						
					</p:tab>
					<p:tab title="Confirmation">
						<p:panel header="Confirmation">
							<h:panelGrid columns="2">
								<h:outputText value="Product Name:" />
								<h:outputText value="#{productBean.product.name}" />
								
								<h:outputText value="Quantity:" />
								<h:outputText value="#{productBean.product.quantity}" />
								
								<h:outputText value="Manufactured on:" />
								<h:outputText value="#{productBean.product.manufacturedDate}" />
								
								<h:outputText value="Category:" />
								<h:outputText value="#{productBean.product.category}" />
								
								<h:outputText value="Brand:" />
								<h:outputText value="#{productBean.product.brand}" />
							
							</h:panelGrid>						
							
							
						</p:panel>
																			
						
					</p:tab>
				</p:wizard>
			</h:form>
		</p:panel>
	</ui:define>
	
</ui:composition>